import React, { useState, useEffect, useRef } from 'react';
import {
    CardBody,
  
    Row,

} from "reactstrap";

const Question = ({ data, onAnswerUpdate, numberOfQuestions, activeQuestion, onSetActiveQuestion, onSetStep }) => {

    const [selected, setSelected] = useState('');
    const [error, setError] = useState('');
    const radiosWrapper = useRef();

    useEffect(() => {
        const findCheckedInput = radiosWrapper.current.querySelector('input:checked');
        if (findCheckedInput) {
            findCheckedInput.checked = false;
        }
    }, [data]);




    const changeHandler = (e) => {
        setSelected(e.target.value);
        if (error) {
            setError('');
        }
    }
   

    const nextClickHandler = (e) => {
        if (selected === '') {
            return setError('Please select one option!');
        }

        onAnswerUpdate(prevState => [...prevState, { q: data.question, a: selected }]);
        setSelected('');

        if (activeQuestion < numberOfQuestions - 1) {
            onSetActiveQuestion(activeQuestion + 1);
        } else {
            onSetStep(3);
        }

    }


    return (
        <div className="card">
            <div className="card-content">
                <div className="content">
                    <CardBody>
                        <Row>
                    <div className="col-lg-1 col-md-1">
                        <div className="small-div-circle">1</div>
                    </div>

                    <div className="col-lg-11 col-md-11">
                        <h4 className="quiz-question-h5 ">Question</h4>
                        <p>{data.question}</p>
                            </div>
                        </Row>
                    </CardBody>

                    <hr className="my-hr" />

                    <CardBody>
                        <Row>
                            <div className="col-lg-12 col-md-12">
                                <h4>Answer</h4>
                            </div>
                        </Row>

                        <Row >
                            <div className="col-lg-12 col-md-12 " ref={radiosWrapper}>
                                {data.choices.map((choice, i) => (
                            <div>
                                <div className="form-check" key={i}>
                                    <input name="radios-example" type="radio" className="form-check-input" value={choice} onChange={changeHandler} />
                                    <label title="" className="form-check-label"> {choice}</label>
                                </div>
                            </div>
                             ))}
                            </div>
                        </Row>
                    </CardBody>


                 

                    {error && <div className="has-text-danger">{error}</div>}
                  
                    <button className="button is-link is-medium is-fullwidth mt-4" onClick={nextClickHandler}>Next</button>
                </div>
            </div>
        </div>
    );
}

export default Question;
